import React from 'react';
import { connect } from 'react-redux';
import { Modal, Radio, Form, Select, message } from 'antd';
import DiDiService from './didi-expense.service';
const FormItem = Form.Item;
const { Option } = Select;
class AgentModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      isAgent: false,
      userList: [],
      userInfo: {}
    };
  };
  componentDidMount() {
  //  this.getListData();
  };
  getListData = async () => {
    const data = await DiDiService.getProxyPrincipals();
    if (data.status === 200) {
      this.setState({ userList: data.data })
    }
    console.log('data', data)
  }
  changeAgent = (e) => {
    this.setState({ isAgent: e.target.value });
  };
  onCancel = () => {
    const { user } = this.props;
    console.log('user', user)
    this.props.onChange(this.state.isAgent, { name: user.fullName, userOID: user.userOID })
  };
  onOk = () => {
    const { user } = this.props;
    if (this.state.isAgent) {
      if (this.state.userInfo && this.state.userInfo.userOID) {
        this.props.onChange(this.state.isAgent, { fullName: this.state.userInfo.fullName, userOID: this.state.userInfo.userOID })
      } else {
        message.warning('请先选择被代理人');
      }
    } else {
      this.props.onChange(this.state.isAgent, { fullName: user.fullName, userOID: user.userOID })
    }
  };
  chooseUser = (value) => {
    let obj = {};
    let { dataList } = this.props;
    console.log("userList", dataList)
    dataList && dataList.map(item => {
      if (item.userOID === value) {
        obj = {
          fullName: item.fullName,
          userOID: item.userOID
        }
      }
    });
    this.setState({ userInfo: obj })
    console.log("11111", value)
  }
  render() {
    const { isAgent, userList } = this.state;
    const { getFieldDecorator } = this.props.form;
    const { visible, dataList } = this.props;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14, offset: 1 }
    };
    return (
      <Modal
        title="代理人"
        visible={visible}
        onCancel={this.onCancel}
        onOk={this.onOk}
      >
        <Form>
          <FormItem label="代谁" {...formItemLayout}>
            {getFieldDecorator('isAgent', {
              initialValue: false
            })(
              <Radio.Group onChange={this.changeAgent}>
                <Radio.Button value={false}>代本人</Radio.Button>
                <Radio.Button value={true}>代他人</Radio.Button>
              </Radio.Group>
            )}
          </FormItem>
          {isAgent && <FormItem label="被代理人" {...formItemLayout}>
            {getFieldDecorator('agentUser', {
              rules: [{
                required: true,
                message: '请选择被代理人'
              }]
            })(
              <Select placeholder="请选择" onChange={this.chooseUser}>
                {dataList && dataList.map((item, index) => (
                  <Option value={item.userOID} key={item.userOID}>{item.fullName}</Option>
                ))}
              </Select>
            )}
          </FormItem>}
        </Form>
      </Modal>
    )
  }
}

function mapStateToProps(state) {
  return {
    user: state.login.user,
  };
}

export default connect(mapStateToProps)(Form.create()(AgentModal));